<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>分页</title>
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <script src="/bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
    <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/bower_components/angular/angular.min.js" type="text/javascript"></script>
    <script src="../bower_components/angular-resource/angular-resource.js" type="text/javascript"></script>
</head>
<body ng-controller="myController" class="container">
<div class="panel panel-default">
    <div class="panel-header alert alert-info">
        <button class="btn btn-success" ng-click="find()">查找</button>
    </div>
    <div class="panel-body">
        <table class="table table-striped table-bordered">
            <thead>
            <tr>
                <th>书名</th>
                <th>价格</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="book in books">
                <td>{{book.name}}</td>
                <td>{{book.price}}</td>
            </tr>
            </tbody>
        </table>
       <!-- <nav ng-if="books.length>0" aria-label="Page navigation" class="navbar-right">
            <ul class="pagination">
                <li ng-class="{'disabled':current<=1}">
                    <span  ng-if="current<=1" aria-hidden="true">&laquo;</span>
                    <a ng-if="current>1" href="javascript:void(0)" ng-click="selectPage(current-1)" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                     </a>
                </li>
                <li ng-repeat="num in pageList" ng-class="{'active':num==current}"><a ng-click="selectPage(num)" href="#">{{num}}</a></li>
                <li ng-class="{'disabled':current>=pageList.length}">
                    <span ng-if="current>=pageList.length" aria-hidden="true">&raquo;</span>
                    <a ng-if="current<pageList.length" href="javascript:void(0)" aria-label="Next" ng-click="selectPage(current+1)" >
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>-->
        <page config="pageConfig"></page>
    </div>
</div>
</body>
<script>
    var app = angular.module('app', ['ngResource']);
    app.factory('bookService', function ($resource) {
        return $resource("/book:id",
            //将路径上的参数绑定指向对象的id
            {id: '@id'},
            //新增加的方法
            {
                update: {
                    method: 'PUT'
                }
            })

    });
    app.controller('myController', function ($scope, bookService) {
        $scope.books = [];
        $scope.booksList = [];
        $scope.pageConfig={};
        $scope.pageList=[];
        $scope.pageConfig.pageList=$scope.pageList;
        $scope.pageConfig.current=1;
        $scope.current=1;
        $scope.find = function () {
            /**
             * get:获取单个数据，
             * query:获取所有
             */
            bookService.query().$promise.then(function (data) {
                console.log(data);
                var pageSize = 2;
                $scope.booksList = data;
                $scope.total =  $scope.booksList.length;
                $scope.pageList.length =Math.ceil( $scope.total/pageSize);
                for(let [key,value] of $scope.pageList.entries()){
                    $scope.pageList[key]=key+1;
                }
                $scope.selectPage();

            })
        };

        $scope.selectPage=function (num) {
            $scope.current=$scope.pageConfig.current=num || 1;
            var start = ($scope.pageConfig.current-1)*2;
            var end =start+2;
            $scope.books=$scope.booksList.slice(start,end)
        }
    });
    app.directive("page",[function () {
        return {
            restrict:'E',
            replace:true,
            templateUrl:'/filter/pageFoot.html',
            scope:{
                config:'=?',
            },
            link:function (scope,element,attrs) {
               scope.pageList=scope.config.pageList;
                /*scope.current = scope.config.current
               console.log(scope);
               scope.selectPage=function (num) {
                   scope.current=num || scope.config.current;
               }*/
            }
        }
    }])
</script>
</html>